@spectrum-web-components/icons-ui

Overview

Deliver Spectrum UI Icons as either:

• Registered custom elements (<sp-icon-arrow75>)
• Unregistered class definitions (IconArrow75)
• Functions with customizable template tags to be used across various frameworks (Arrow75Icon())

Search a full list of icons to find an icon for your project or find technical information about extended use cases, like consuming this package in various UI frameworks below.

Remember to consult Spectrum's Iconography Guidelines when planning how to leverage these icons in the visual delivery of your application.

Usage

yarn add @spectrum-web-components/icons-ui

Import the side effectful registration of a single element (e.g. <sp-icon-arrow75>) via:

import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow75.js';

Leverage a single icon base class (e.g. IconArrow75) as a type, or for extension purposes, do so, via:

import { IconArrow75 } from '@spectrum-web-components/icons-ui/src/elements/IconArrow75.js';

Find an icon

Search the available Spectrum Workflow icons below.

Complete search experience available at: https://opensource.adobe.com/spectrum-web-components/components/icons-ui/.

Alternative usage

You can import raw icons (e.g. Arrow75Icon()) via:

import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow75.js';

@spectrum-web-components/icons-ui exports all icons. If your build process tree-shakes dependencies, you can import from it directly:

import { Arrow75Icon } from '@spectrum-web-components/icons-ui';

These icon literals are prepared with the html template tag from lit-html, the default value of an icon export will be as follows:

import { LitElement, html } from 'lit-element';
import '@spectrum-web-components/icon';
import { Arrow75Icon } from '@spectrum-web-components/icons-ui';

class ElementWithIcon extends LitElement {
    protected override render(): TemplateResult {
        return html`
            <sp-icon>
                ${Arrow75Icon()}
            </sp-icon>
        `
    }
}

customElements.define('element-with-icon', ElementWithIcon);

Every icons can be customized via the following options:

{
    width: 24, // number outlining the width to deliver the SVG element with
    height: 24, // number outlining the height to delivery the SVG element with
    hidden: false, // boolean representing whether to apply the `aria-hidden` attribute
    title: 'Icon title', // string of the title to deliver the icon with
}

Extended use cases

The default exports of this package are pre-wrapped via setCustomTemplateLiteralTag in the html template tag from lit-html, and work like the following::

import { Arrow75Icon } from '@spectrum-web-components/icons-ui';

console.log(Arrow75Icon());

/***
TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: DefaultTemplateProcessor, constructor: Object}
***/

When working in the context of other frameworks, it is possible to import the icons with a generic template tag as follows:

import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons.js';

console.log(Arrow75Icon());

/***
<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 36 36"
    role="img"
    fill="currentColor"
    height="24"
    width="24"
    aria-hidden="false"
    aria-label="Circle"
>
    <path
      d="M9.26 4.406L6.528 1.672A.84.84 0 005.34 2.859L6.64 4.16H1.396a.84.84 0 000 1.68H6.64l-1.301 1.3a.84.84 0 001.188 1.188l2.734-2.734a.84.84 0 000-1.188z"
    />
</svg>
***/

What's more, if you're already working with a specific parser in your project, you can assign it as the one to use when delivering the icons in order to be sure that the SVG content is delivered as parsed content to your final template. The means if you were working with Preact via the htm tag as bound to the provided hyperscript function:

import {
    Arrow75Icon,
    setCustomTemplateLiteralTag,
} from '@spectrum-web-components/icons-ui/src/icons.js';
import htm from 'htm';
import { h } from 'preact';

const hPreact = htm.bind(h);

setCustomTemplateLiteralTag(hPreact);

console.log(Arrow75Icon());

/***
VNode {nodeName: "svg", children: Array[1], attributes: Object, key: undefined, constructor: Object}
***/

In this way, the icons exported by @spectrum-web-components/icons-ui can be leveraged in projects powered by the likes of hyperHTML, lighterhtml, lit-html, Preact, React, Vanilla JS, Vue.js, and more!

Accessibility

Review the accessibility guidelines for the icon.

Changelog

1.7.0 (2025-06-11)

Minor Changes

sp-overlay: Fixed : Overlays (like pickers and action menus) were incorrectly closing when scrolling occurred within components. The fix ensures the handleScroll method in OverlayStack only responds to document/body scrolling events and ignores component-level scrolling events, which was the original intention.

sp-card: Fixed: On mobile Chrome (both Android and iOS), scrolling on sp-card components would inadvertently trigger click events. This was caused by the timing-based click detection (200ms threshold) in the pointer event handling, which could misinterpret quick scrolls as clicks. This issue did not affect Safari on mobile devices.

sp-action-button: - Fixed : Action buttons with href attributes now properly detects modifier keys and skips the proxy click, allowing only native browser behavior to proceed.

Patch Changes

sp-styles: Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

sp-card: - Fixed: sp-card component relies on sp-popover for certain toggle interactive behaviors, but this dependency was missing from its dependency tree.

sp-menu: Fixes: Icons in menu stories weren't properly responding to theme changes when used in functional story components. Switching to class-based LitElement components ensures proper component lifecycle hooks and shadow DOM context for icon initialization and theme integration.

sp-tabs: Added @spectrum-web-components/action-button as a dependency for Tabs as its used in the direction button.

sp-split-view: Added @spectrum-web-components/shared dependency in splitview since it uses ranDomId from the shared package

sp-textfield: Replace deprecated word-break: break-word with overflow-wrap: break-word to align with modern CSS standards and improve cross-browser compatibility. This property was deprecated in Chrome 44 (July 2015) in favor of the standardized overflow-wrap property.